<template>
  <div id="user_friends">
    <div class="nav">
      <div class="search">
        <div class="input" @click="goAddChat">
          <i class="el-icon-search"></i>
          添加好友 / 群聊
        </div>
      </div>
      <div class="content">
        <el-collapse v-model="activeNames">
          <el-collapse-item
            title="我的好友"
            name="friends"
            @click="this.activeNames = ['friends']"
          >
            <router-link
              class="link"
              active-class="active"
              :to="`/home/chatBox/userDetails/${item.friendId}`"
              replace
              v-for="(item, index) in $store.state.userFriends"
              :key="index"
              @click.native="storageUserMsg(item)"
            >
              <div class="group_img">
                <img :src="$host + item.qaqUsers[0].avatar" />
              </div>
              <div class="group_name">{{ item.userInfos[0].nickName }}</div>
            </router-link>
          </el-collapse-item>
          <el-collapse-item
            title="我的群聊"
            name="group"
            @click="this.activeNames = ['group']"
          >
            <router-link
              class="link"
              active-class="active"
              :to="`/home/chatBox/groupDetails/${item.groupId}`"
              replace
              v-for="(item, index) in $store.state.userGroup"
              :key="index"
            >
              <div class="group_img">
                <img :src="$host + item.groupImg" alt="" />
              </div>
              <div class="group_name">{{ item.groupName }}</div>
            </router-link>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="my">
        <div class="unlogin" v-if="!isLogin">
          <div class="portrait" @click="goSpace">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-niao-"></use>
            </svg>
          </div>
          <div class="tips">您还没登录呦</div>
        </div>
        <div class="login" v-if="isLogin">
          <div class="portrait" @click="goSpace">
            <img :src="this.$host + this.userMsg.qaqUser.avatar" />
          </div>
          <div class="user_name">{{ userMsg.userInfo.nickName }}</div>
        </div>
        <div class="system">
          <svg class="icon" aria-hidden="true" @click="voiceOff = !voiceOff">
            <use
              :xlink:href="
                voiceOff ? '#icon-yuyin-guan2-copy' : '#icon-yuyin-copy'
              "
            ></use>
          </svg>
          <svg class="icon" aria-hidden="true" @click="soundOff = !soundOff">
            <use
              :xlink:href="
                soundOff
                  ? '#icon-shengyin-guan-copy'
                  : '#icon-shengyin-kai-copy'
              "
            ></use>
          </svg>
          <svg class="icon" aria-hidden="true" @click="cameraOff = !cameraOff">
            <use
              :xlink:href="
                cameraOff
                  ? '#icon-shexiangtou-guanbi-copy'
                  : '#icon-shexiangtou-copy'
              "
            ></use>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // import { getMyFriends, getMyGroup } from '@/utils/chatBox.js'

  export default {
    name: 'UserFriends',
    data() {
      return {
        userMsg: JSON.parse(localStorage.getItem('user')),
        userFriends: this.$store.userFriends,
        userGroup: this.$store.userGroup,
        activeNames: JSON.parse(sessionStorage.getItem('activeNames')),  //选中的折叠栏
        isLogin: JSON.parse(localStorage.getItem('user')) ? true : false,
        voiceOff: false,  //禁用话筒
        soundOff: false,  //关闭声音
        cameraOff: false, //禁用摄像头
      }
    },
    computed: {
      // userAvatar() {
      //   return this.$host + this.userMsg.qaqUser.avatar
      // },
    },
    methods: {
      //获取用户添加的好友
      async getMyFriends() {
        // if (this.userMsg) {
        //   let { data: { data } } = await getMyFriends(this.userMsg.id)
        //   this.userFriends = data
        //   $store.dispatch
        // }
        this.$store.dispatch('getMyFriends')
      },
      //获取用户加入的群聊
      async getMyGroup() {
        // if (this.userMsg) {
        //   let { data: { data } } = await getMyGroup(this.userMsg.id)
        //   this.userGroup = data
        // }
        this.$store.dispatch('getMyGroup')
      },
      //存储点击的好友信息
      storageUserMsg(userMsg) {
        sessionStorage.setItem('friendsMsg', JSON.stringify(userMsg))
      },
      //跳转用户中心
      goSpace() {
        this.$router.push('/home/space')
        this.$store.commit('changeType', 'space')
      },
      //跳转加好友页面
      goAddChat() {
        if (localStorage.getItem('user')) this.$router.push('/home/chatBox/addChat')
        else alert('请先登录')
      }
    },
    created() {
      this.getMyFriends()
      this.getMyGroup()
    },
    updated() {
      sessionStorage.setItem('activeNames', JSON.stringify(this.activeNames))
    },
  }
</script>

<style scoped>
  #user_friends {
    height: 100vh;
    background-color: rgb(32, 31, 31);
  }
  .nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 240px;
    height: 100%;
    background-color: #2f3136;
  }
  /* 搜索好友 */
  .search {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 48px;
    box-shadow: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05),
      0 2px 0 rgba(4, 4, 5, 0.05);
  }

  .search .input {
    width: 220px;
    height: 28px;
    border-color: #202225;
    font-size: 12px;
    text-align: center;
    line-height: 28px;
    background-color: #202225;
    color: #c0c4cc;
    cursor: pointer;
  }

  /* 我的好友 */
  .content {
    flex: 1;
    margin-top: 10px;
    overflow: auto;
  }
  /* 滚动条样式修改 */
  .content::-webkit-scrollbar {
    width: 6px;
    /* height: 4px; */
  }
  .content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #000;
  }

  .content /deep/ .el-collapse {
    margin: 0 6px;
    width: 228px;
    border: 0;
  }
  .content /deep/.el-collapse-item {
    margin-bottom: 10px;
  }
  .content /deep/ .el-collapse-item__header {
    border: 0;
    font-size: 16px;
    padding-left: 20px;
    color: #8e9297;
    background: #393c43;
  }
  .content /deep/ .el-collapse-item__header:hover {
    color: #fff;
  }
  .content /deep/ .el-collapse-item__content {
    padding-bottom: 0;
  }
  .content /deep/ .el-collapse-item__wrap {
    border: 0;
    background-color: #2f3136;
  }
  /* 好友内容 */
  .content .link {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 10px;
    padding: 5px;
    border-radius: 5px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
  }
  .content .link:hover {
    background-color: #393c43;
  }
  .active {
    background-color: #393c43;
  }
  .content .link .group_img {
    width: 32px;
    height: 32px;
    margin-right: 15px;
    border-radius: 50%;
    overflow: hidden;
  }
  .content .link img {
    width: 100%;
    height: 100%;
  }
  .content .link .group_name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 我的 */
  .my {
    display: flex;
    width: 240px;
    height: 52px;
    padding: 0 8px;
    background-color: #292b2f;
  }
  .unlogin {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 144px;
    height: 100%;
  }
  .portrait {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
  }
  .portrait svg {
    width: 100%;
    height: 100%;
  }
  .unlogin .tips {
    margin: 0 8px;
    font-size: 14px;
    color: #fff;
  }
  .login {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 144px;
    height: 100%;
  }
  .portrait img {
    width: 100%;
    height: 100%;
  }
  .login .user_name {
    margin: 0 8px;
    width: 112px;
    font-size: 14px;
    color: #fff;
    overflow: hidden; /* 文字长度超出限定宽度，则隐藏超出的内容 */
    white-space: nowrap; /* 设置文字在一行显示，不能换行 */
    text-overflow: ellipsis; /* 规定当文本溢出时，显示省略符号来代表被修剪的文本 */
  }
  .my .system {
    width: 96px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #000;
  }
  .system svg {
    font-size: 20px;
    cursor: pointer;
  }
</style>